<template>
  <div class="branch-detail-page">
    <!-- 头部信息 -->
    <div class="page-header-info">
      <h1 class="branch-title">{{ branchName }}</h1>
      <div class="branch-meta">
        <span class="meta-item">机构号: {{ orgNo }}</span>
        <span class="meta-item">综合得分: <strong>{{ totalScore }}</strong></span>
        <span class="meta-item">排名: <strong>#{{ rank }}</strong></span>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="content-area">
      <!-- 左侧维度列表 -->
      <div class="dimensions-list">
        <div 
          v-for="dimension in dimensions"
          :key="dimension.key"
          class="dimension-card"
          :class="dimension.level"
        >
          <div class="dimension-header">
            <div class="dimension-icon" :style="{ background: dimension.color }">
              {{ dimension.icon }}
            </div>
            <div class="dimension-info">
              <h3 class="dimension-name">{{ dimension.name }}</h3>
              <p class="dimension-desc">{{ dimension.description }}</p>
            </div>
          </div>
          
          <div class="dimension-metrics">
            <div class="metric-main">
              <span class="metric-label">维度得分</span>
              <span class="metric-value">{{ dimension.score }}</span>
            </div>
            <div class="metric-secondary">
              <div class="metric-item">
                <span class="label">指标数</span>
                <span class="value">{{ dimension.indicatorCount }}</span>
              </div>
              <div class="metric-item">
                <span class="label">排名</span>
                <span class="value">#{{ dimension.rank }}</span>
              </div>
            </div>
          </div>

          <div class="dimension-indicators">
            <div 
              v-for="indicator in dimension.indicators"
              :key="indicator.name"
              class="indicator-item"
            >
              <span class="indicator-name">{{ indicator.name }}</span>
              <span class="indicator-score" :class="getScoreClass(indicator.score)">
                {{ indicator.score }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间雷达图 -->
      <div class="radar-section">
        <div class="radar-card">
          <h2 class="radar-title">五维能力雷达图</h2>
          <div class="radar-container" ref="radarContainer">
            <canvas ref="radarCanvas" width="400" height="400"></canvas>
          </div>
          <div class="radar-legend">
            <div 
              v-for="dimension in dimensions"
              :key="dimension.key"
              class="legend-item"
            >
              <span class="legend-color" :style="{ background: dimension.color }"></span>
              <span class="legend-name">{{ dimension.name }}</span>
              <span class="legend-score">{{ dimension.score }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

const props = defineProps({
  orgNo: {
    type: String,
    required: true
  },
  branchName: {
    type: String,
    required: true
  }
})

defineEmits(['close'])

const radarCanvas = ref(null)
const radarContainer = ref(null)

// 伪数据 - 五个维度
const dimensions = ref([
  {
    key: 'asset_quality',
    name: '资产质量',
    icon: '🛡️',
    color: '#667eea',
    description: '不良贷款、关注类贷款、贷款迁徙率等',
    score: 88.5,
    rank: 3,
    indicatorCount: 10,
    level: 'excellent',
    indicators: [
      { name: '不良贷款率', score: 92.3 },
      { name: '不良贷款余额', score: 87.6 },
      { name: '不良贷款增幅', score: 95.2 },
      { name: '关注类贷款占比', score: 84.1 },
      { name: '关注类贷款余额', score: 89.8 },
      { name: '正常类贷款迁徙率', score: 91.5 },
      { name: '关注类贷款迁徙率', score: 86.3 },
      { name: '次级类贷款迁徙率', score: 88.9 },
      { name: 'Top10客户贷款占比', score: 82.7 },
      { name: 'Top10客户贷款余额', score: 85.4 }
    ]
  },
  {
    key: 'deposit',
    name: '存款业务',
    icon: '💰',
    color: '#51cf66',
    description: '存款余额、低成本存款占比、存款偏离度等',
    score: 92.3,
    rank: 1,
    indicatorCount: 4,
    level: 'excellent',
    indicators: [
      { name: '存款余额增速', score: 94.5 },
      { name: '存款余额增加值', score: 91.8 },
      { name: '低成本存款占比', score: 93.2 },
      { name: '存款偏离度', score: 89.7 }
    ]
  },
  {
    key: 'loan',
    name: '贷款业务',
    icon: '📈',
    color: '#ffd43b',
    description: '贷款投放、贷款户数、贷款增长等',
    score: 85.7,
    rank: 5,
    indicatorCount: 4,
    level: 'good',
    indicators: [
      { name: '新增贷款投放额', score: 88.9 },
      { name: '各项贷款增长率', score: 84.3 },
      { name: '贷款户数增加值', score: 86.5 },
      { name: '贷款户数增长率', score: 83.2 }
    ]
  },
  {
    key: 'intermediate',
    name: '中间业务',
    icon: '💼',
    color: '#ff8787',
    description: '中间业务收入、稳定型中收等',
    score: 78.9,
    rank: 8,
    indicatorCount: 6,
    level: 'fair',
    indicators: [
      { name: '中间业务收入绝对额', score: 81.2 },
      { name: '中间业务收入占比', score: 76.5 },
      { name: '中间业务收入增长率', score: 79.8 },
      { name: '稳定型中收占比', score: 77.3 },
      { name: '稳定型中收绝对额', score: 80.6 },
      { name: '稳定型中收增长率', score: 78.1 }
    ]
  },
  {
    key: 'compliance',
    name: '内控合规',
    icon: '⚖️',
    color: '#be4bdb',
    description: '风险合规得分、成本收入比、人均利润等',
    score: 91.2,
    rank: 2,
    indicatorCount: 3,
    level: 'excellent',
    indicators: [
      { name: '风险合规得分', score: 96.7 },
      { name: '成本收入比', score: 89.4 },
      { name: '人均利润', score: 87.5 }
    ]
  }
])

// 计算总得分
const totalScore = computed(() => {
  const sum = dimensions.value.reduce((acc, d) => acc + d.score, 0)
  return (sum / dimensions.value.length).toFixed(1)
})

// 排名（伪数据）
const rank = ref(3)

// 获取得分样式类
const getScoreClass = (score) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 70) return 'fair'
  return 'poor'
}

// 绘制雷达图
const drawRadar = () => {
  if (!radarCanvas.value) return
  
  const canvas = radarCanvas.value
  const ctx = canvas.getContext('2d')
  const centerX = canvas.width / 2
  const centerY = canvas.height / 2
  const radius = 150
  const levels = 5 // 5个层级 (0, 20, 40, 60, 80, 100)
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 绘制背景网格
  ctx.strokeStyle = '#e1e4e8'
  ctx.lineWidth = 1
  
  for (let i = 1; i <= levels; i++) {
    const r = (radius / levels) * i
    ctx.beginPath()
    for (let j = 0; j < dimensions.value.length; j++) {
      const angle = (Math.PI * 2 / dimensions.value.length) * j - Math.PI / 2
      const x = centerX + r * Math.cos(angle)
      const y = centerY + r * Math.sin(angle)
      if (j === 0) {
        ctx.moveTo(x, y)
      } else {
        ctx.lineTo(x, y)
      }
    }
    ctx.closePath()
    ctx.stroke()
  }
  
  // 绘制轴线和标签
  ctx.strokeStyle = '#e1e4e8'
  ctx.fillStyle = '#697386'
  ctx.font = '12px sans-serif'
  ctx.textAlign = 'center'
  
  dimensions.value.forEach((dim, i) => {
    const angle = (Math.PI * 2 / dimensions.value.length) * i - Math.PI / 2
    const x = centerX + radius * Math.cos(angle)
    const y = centerY + radius * Math.sin(angle)
    
    // 绘制轴线
    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.lineTo(x, y)
    ctx.stroke()
    
    // 绘制标签
    const labelX = centerX + (radius + 30) * Math.cos(angle)
    const labelY = centerY + (radius + 30) * Math.sin(angle)
    ctx.fillText(dim.name, labelX, labelY)
  })
  
  // 绘制数据区域
  ctx.beginPath()
  ctx.fillStyle = 'rgba(102, 126, 234, 0.2)'
  ctx.strokeStyle = '#667eea'
  ctx.lineWidth = 2
  
  dimensions.value.forEach((dim, i) => {
    const angle = (Math.PI * 2 / dimensions.value.length) * i - Math.PI / 2
    const value = dim.score / 100 // 归一化到 0-1
    const r = radius * value
    const x = centerX + r * Math.cos(angle)
    const y = centerY + r * Math.sin(angle)
    
    if (i === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
    
    // 绘制数据点
    ctx.fillStyle = dim.color
    ctx.beginPath()
    ctx.arc(x, y, 5, 0, Math.PI * 2)
    ctx.fill()
  })
  
  ctx.closePath()
  ctx.stroke()
  ctx.fillStyle = 'rgba(102, 126, 234, 0.2)'
  ctx.fill()
}

onMounted(() => {
  drawRadar()
})
</script>

<style scoped>
.branch-detail-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fd 0%, #ffffff 100%);
  padding: 0;
}

/* 强制重置全局样式 */
.branch-detail-page,
.branch-detail-page * {
  color: initial !important;
}

.branch-detail-page {
  color: #1a1f36 !important;
}

/* 页面头部信息 */
.page-header-info {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 32px 48px;
  color: white;
}

.branch-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: white !important;
}

.branch-meta {
  display: flex;
  gap: 24px;
  font-size: 14px;
  opacity: 0.95;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: white !important;
}

.meta-item strong {
  font-weight: 700;
  font-size: 18px;
  color: white !important;
}

/* 主要内容区 */
.content-area {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  padding: 24px 48px;
  max-width: 1800px;
  margin: 0 auto;
}

/* 维度列表 */
.dimensions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dimension-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border-left: 4px solid #e1e4e8;
  transition: all 0.3s ease;
}

.dimension-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
}

.dimension-card.excellent {
  border-left-color: #51cf66;
}

.dimension-card.good {
  border-left-color: #667eea;
}

.dimension-card.fair {
  border-left-color: #ffd43b;
}

.dimension-card.poor {
  border-left-color: #ff8787;
}

.dimension-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.dimension-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.dimension-info {
  flex: 1;
}

.dimension-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #1a1f36 !important;
}

.dimension-desc {
  font-size: 13px;
  color: #697386 !important;
  margin: 0;
}

.dimension-metrics {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #f1f3f5;
  border-bottom: 1px solid #f1f3f5;
  margin-bottom: 16px;
}

.metric-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-main .metric-label {
  font-size: 12px;
  color: #9aa5b1 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-main .metric-value {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-secondary {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.metric-item .label {
  font-size: 11px;
  color: #9aa5b1 !important;
}

.metric-item .value {
  font-size: 16px;
  font-weight: 600;
  color: #1a1f36 !important;
}

.dimension-indicators {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.indicator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fd;
  border-radius: 8px;
  font-size: 13px;
}

.indicator-name {
  color: #697386 !important;
}

.indicator-score {
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.indicator-score.excellent {
  background: #d3f9d8;
  color: #2b8a3e !important;
}

.indicator-score.good {
  background: #dbe4ff;
  color: #364fc7 !important;
}

.indicator-score.fair {
  background: #fff3bf;
  color: #e67700 !important;
}

.indicator-score.poor {
  background: #ffe5e7;
  color: #d93025 !important;
}

/* 雷达图区域 */
.radar-section {
  position: sticky;
  top: 24px;
  height: fit-content;
}

.radar-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.radar-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 24px 0;
  color: #1a1f36 !important;
}

.radar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.radar-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.legend-name {
  flex: 1;
  color: #697386 !important;
}

.legend-score {
  font-weight: 600;
  color: #1a1f36 !important;
}

/* 响应式 */
@media (max-width: 1200px) {
  .content-area {
    grid-template-columns: 1fr;
  }

  .radar-section {
    position: static;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 24px;
  }

  .content-area {
    padding: 16px;
  }

  .dimension-indicators {
    grid-template-columns: 1fr;
  }

  .branch-meta {
    flex-direction: column;
    gap: 8px;
  }
}
</style>

